<template>
  <div class="img-con flex-between">
    <div class="item-con">
      <div class="img-item flex-center">
        <d-player
          ref="player"
          class="video"
          :options="videoOptions"
          @play="play"
        ></d-player>
      </div>
      <div class="time-wrap flex-between">
        <!-- <div class="time">2020-11-10 09:20</div> -->
        <el-upload
          ref="upload"
          class="upload-demo"
          :action="baseURL"
          :on-success="upSuccess"
          :before-upload="beforeUpload"
          :show-file-list="false"
          :auto-upload="true"
          :data="uploadOtherData"
        >
          <el-button v-if="isShowUpload" size="small" type="primary"
            >上传本地文件</el-button
          >
        </el-upload>
      </div>
    </div>
  </div>
</template>

<script>
let loading = null;
import VueDPlayer from "vue-dplayer";
import "vue-dplayer/dist/vue-dplayer.css";
export default {
  components: {
    "d-player": VueDPlayer,
  },
  props: {
    flag: {
      default: () => "0",
    },
    isShowUpload: {
      default: () => false,
    },
  },
  computed: {
    uploadOtherData() {
      return {
        sessionId: this.sessionId,
        flag: this.flag,
      };
    },
  },
  data() {
    return {
      videoOptions: {
        autoplay: true,
        mutex: false,
        muted: true,
        volume: 0,
        preload: "metadata",
        video: {
          // url: "",
          autoplay: true,
          muted: true,
          type: "auto",
          volume: 0.1,
        },
        contextmenu: ["123"],
      },
      choosedId: 0,
      sessionId: "",
      videoUrl: "",
      imgUrlBD: "", // 被动处理模式
      baseURL: `${process.env.VUE_APP_BASE_URL}/activeMp4`,
    };
  },
  mounted() {
    /* eslint-disable */
    let player = this.$refs.player.dp;
    player.video.autoplay = true;
    player.video.muted = "muted";
    console.log(888, player);
    // var ws = new WebSocket(`${process.env.VUE_APP_SOCKET_IP}/websocket`);
    var ws = new WebSocket("ws://192.168.43.197:9081/websocket");
    ws.onopen = () => {
      console.log("websocket链接成功", this.flag);
      ws.send(`{"passiveVideo":"passiveVideo"}`);
    };
    ws.onmessage = (e) => {
      console.log("数据通信模式：被动视屏", e.data);
      let data = JSON.parse(e.data);
      if (data.event === "videoPath") {
        console.log(99999, data.data.videoPath, player.switchVideo);
        // this.videoOptions.video.url = data.data.videoPath;
        player.switchVideo({
          url: data.data.videoPath,
        });
        player.play();
        // player.toggle();
      }
    };
    ws.onclose = function () {
      console.log("closed...");
    };
    ws.onerror = function () {
      console.log(this.readyState);
    };
  },
  methods: {
    // menuPlayer() {
    //   console.log(999);
    //   return false;
    // },
    play() {
      console.log("play callback");
    },
    upSuccess(data) {
      loading.close();
      console.log(123, data);
      this.videoOptions.video.url = this.videoOptions.video.url + data;
      const player = this.$refs.player.dp;
      let url = `${process.env.VUE_APP_BASE_URL}/getVideo?videoPath=${data}`;
      console.log(456, this.$refs.player.dp, url);
      player.switchVideo({
        url: url,
      });
    },
    beforeUpload() {
      loading = this.$loading({
        lock: true,
        text: "努力上传中...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
    },
    submit() {
      this.$refs.upload.submit();
    },
  },
};
</script>

<style lang="scss" scoped>
.items {
  margin-top: 20px;
  font-size: 18px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #00d8f5;
  line-height: 1;
  .tab {
    margin-right: 20px;
    position: relative;
    &::after {
      content: "";
      position: absolute;
      bottom: -10px;
      left: 0;
      height: 2px;
      width: 0px;
      background: #00d8f5;
    }
    &.active {
      color: pink;
      &::after {
        width: 100%;
        transition: width 0.3s;
      }
    }
  }
}

.img-con {
  padding-bottom: 0.3rem;
  margin-top: 0.4rem;
  flex-wrap: wrap;
  .item-con {
    .time-wrap {
      margin-top: 20px;
      // justify-content: flex-end;
      .time {
        // margin-left: 10px;
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #00d8f5;
        line-height: 37px;
      }
    }
    .img-item {
      // width: 1727px;
      // height: 662px;
      width: 11.76rem;
      height: 6.62rem;
      .video {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
<style lang="scss">
.upload-demo {
}
.dplayer-menu {
  display: none !important;
}
</style>